<script setup lang="ts">
import { VueFlow, useVueFlow } from "@vue-flow/core";
import type {
  FlowExportObject,
  Edge as VFEdge,
  Node as VFNode,
} from "@vue-flow/core";
import { MiniMap as VFMiniMap } from "@vue-flow/minimap";
import type { VueFlowSaveControls } from "#build/components";

const emits = defineEmits<{
  updatePreSaved: [];
  updatePreSavedRev: []
}>();

const {
  onEdgeDoubleClick,
  onEdgeClick,
  onConnect,
  addEdges,
  onNodeClick,
  onNodeDoubleClick,
  removeEdges,
  removeNodes,
  edges: vfEdges, // 动态呈现的边
  nodes: vfNodes, // 动态呈现的节点
} = useVueFlow();

const { onDragOver, onDrop, onDragLeave, isDragOver } = useDragAndDrop();

// 仅用做 初始值,不值得浅拷贝

const nodes = ref<VFNode[]>([]);
const edges = ref<VFEdge[]>([]);

onMounted(() => {
  const flowInSession = sessionStorage.getItem("saved-flow");
  if (flowInSession) {
    const flow = superjson.parse<{ nodes: VFNode[]; edges: VFEdge[] }>(
      flowInSession,
    );
    nodes.value = flow.nodes;
    edges.value = flow.edges;
  }
});
onConnect(param => addEdges(param));
onEdgeDoubleClick((param) => {
  // param.edge.animated = true;
  console.log("onEdgeDoubleClick", param.edge);
  console.log("edges", edges.value);

  // edges.value = edges.value.filter((edge) => edge.id !== param.edge.id);
  removeEdges(param.edge);
});
onNodeDoubleClick((param) => {
  console.log("onNodeDoubleClick", param.node);
  removeNodes(param.node);
});
onEdgeClick((param) => {
  if (!param.edge.animated) 
    param.edge.animated = true;
  else param.edge.animated = false;

  console.log("edges", superjson.stringify(param.edge));

  console.log("onEdgeClick", param.edge);
});
onNodeClick((param) => {
  // param.node.data.toolbarVisible = true;
});
watch(edges, () => {
  // console.log("vfEdges", vfEdges.value.length);
  // console.log("edges", edges.value.length);
});
watch(nodes, () => {
  // console.log("nodes", nodes.value.length);
  // console.log("vfEdges", vfEdges.value.length);
});
</script>

<template>
  <ClientOnly>
    <div class="h-full flex flex-row dndflow" @drop="onDrop">
      <VueFlow
        :nodes="nodes"
        :edges="edges"
        auto-connect
        @dragover="onDragOver as UnknownVoidFunction"
        @dragleave="onDragLeave as UnknownVoidFunction"
        @update:nodes="
          (node_value) => {
            // 更新用户手动添加的节点
            nodes = node_value;
          }
        "
        @update:edges="
          (edge_value) => {
            // 更新用户手动添加的边
            edges = edge_value;
          }
        "
      >
        <template #node-toolbar="nodeProps">
          <VueFlowDndCompToolBar
            :data="nodeProps.data"
            :label="nodeProps.data.label"
          />
        </template>
        <VueFlowSaveControls @update-pre-saved="emits('updatePreSaved')" @update-pre-saved-rev="emits('updatePreSavedRev')" />
        <VueFlowDndCompDropZoneBG
          class="ease-in transition-colors duration-200"
          :class="
            isDragOver ? tw`bg-[#c2d6eb] dark:bg-slate-400` : tw`bg-transparent`
          "
        />
        <VFMiniMap
          class="vue-flow__minimap !right-[unset]"
          pannable
          zoomable
          :width="180"
          :height="140"
        />
      </VueFlow>

      <VueFlowDndCompSideBar />
    </div>
    <template #fallback>
      <FallBack />
    </template>
  </ClientOnly>
</template>

<style scoped>
/* @import "https://cdn.jsdelivr.net/npm/@vue-flow/controls@latest/dist/style.css";
@import "https://cdn.jsdelivr.net/npm/@vue-flow/minimap@latest/dist/style.css";
@import "https://cdn.jsdelivr.net/npm/@vue-flow/node-resizer@latest/dist/style.css"; */

/* .vue-flow__minimap { */
/* transform: scale(75%); */
/* transform-origin: bottom right; */
/* } */
</style>
